<template>
	<view class="SearchGoods">
		<!-- 搜索框 -->
		<view id="search">
			<icon type="search" size="15" class="search_icon"/>
			<input type="text" class="search_input" placeholder="搜索心仪的商品" placeholder-class="search_placeholder" v-model="searchVal" @focus="hideSearchHistory" @blur="showSearchHistory" cursor-spacing="10"></input>
			<button @click="searchGoods()">搜索</button>
		</view>
		<!-- 有搜索结果 -->
		<view v-if="searchHistory">
			<!-- 搜索历史 -->
			<view class="search_history">
				<text style="font-size: 24upx;color:#999;">搜索历史</text>
				<image src="../../../static/images/ashcan_03.png" style="width:40upx;height:40upx;" @click="delSearch()"></image>
			</view>
			<!-- 搜索历史条目 (登录)-->
			<view class="search_content" v-if="loginSearch">
				<view v-for="(value,index) in searchValList" :key="index" @click="selectSearch(index)">{{value.searchText}}</view>
			</view>
			<!-- 搜索历史条目(未登录) -->
			<view class="search_content" v-if="noLoginSearch">
				<view v-for="(value,index) in searchValList" :key="index" @click="selectSearch(index)">{{value}}</view>
			</view>
		</view>
		<!-- 搜索出的商品列表 -->
		<view v-if="searchResult">
			<searchProductList :goodsDate="searchDate"></searchProductList>
		</view>
		<!-- 没有搜索结果 -->
		<view v-if="noResult" class="noResult">
			<image src="../../../static/images/noResult_03.png" style="width:305upx;height:332upx"></image>
			<view class="noResultText">没有搜索到对应商品</view>
		</view>
		<!-- 广告 -->
		<view :class="{AD:isAD,activeAD:isActiveAD}" v-if="showAD">
			<text>技术支持：</text>
			<image src="../../../static/images/log_03.png" style="width:30upx;height:24upx"></image>
			<text>掌邦科技</text>
		</view>
	</view>
</template>

<script>
	//引入商品列表组件
	import searchProductList from "@/components/searchProductList/searchProductList.vue"
	export default {
		data() {
			return {
				searchValList:[],
				searchGoodsData:[],
				searchVal:"",
				//商品列表
				searchDate:"",
				searchResult:false,
				noResult:false,
				searchHistory:true,
				isAD:true,
				isActiveAD:false,
				loginSearch:false,
				noLoginSearch:true,
				showAD:true
			};
		},
		methods:{
			selectSearch(index){
				this.searchHistory=false
				if(this.$store.state.token==""){  //未登录
					this.searchVal=this.searchValList[index];
				}else{
					this.searchVal=this.searchValList[index].searchText;
				}
				
			},
			//删除历史记录
			delSearch(){
				uni.request({
					url:this.$store.state.URL+"/search/search_history/get_search_close",
					data:{
						token: this.$store.state.token
					},
					method:"POST",
					success(res) {
						console.log(res);
					}
				})
				this.searchValList.splice(0,this.searchValList.length);  //清空数组（搜索记录）
				//存储搜索值
				uni.setStorageSync('searchValList', this.searchValList);
			},
			//搜索框获取焦点隐藏搜索历史
			hideSearchHistory(){
				this.searchHistory=false;
			},
			//搜索框失去焦点显示搜索历史
			showSearchHistory(){
				// this.searchHistory=true;
			},
			searchGoods(){
				uni.hideKeyboard()
				let that=this;
				if(that.searchVal != ""){	
				  //添加搜索记录
				  var timestamp = Date.parse(new Date());
				  var ts = Math.round(new Date().getTime()/1000).toString();
				  var a=[{ 'createTime':'11111', 'searchText':'444444' }];
				  a[0].createTime=ts
				  a[0].searchText=that.searchVal;
				  var arr_text=JSON.stringify(a)
				  uni.request({
				  	url:this.$store.state.URL+"/search/search_history/add_login_search",
				  	data:{
				  		token: this.$store.state.token,
				  		arr_text:arr_text,
				  	},
				  	method:"GET",
				  	success() {
				  		
				  	}
				  })
				  //数据加载提示框
				  uni.showLoading({
				  	title: '拼命加载中',
				  	mask: true
				  });
				  // start 获取查询商品数据
				  uni.request({
				  	url:this.$store.state.URL+"goods/good/search_goods",
				  	data:{
				  		goodName: that.searchVal,
						merchantID:this.$store.state.merchantDefaultID
				  	},
					method:"POST",
				  	success(res){	
						// that.showAD=false
				  		that.searchDate=res.data.list.data
						uni.hideLoading()
						if(that.searchDate.length!=0){
							that.searchResult=true;
							that.searchHistory=false; 
							that.noResult=false;
							that.isAD=true;
							that.isActiveAD=false;
						}else{
							 that.searchResult=false;
							 that.searchHistory=false;
							 that.noResult=true;
							 that.isAD=true;
							 that.isActiveAD=false;
						}
				  	},
				  })
				  //增加搜索值
				  that.searchValList.push(that.searchVal);
				  //存储搜索值
				  uni.setStorageSync('searchValList', that.searchValList);
				  }else{
					that.searchResult=false;
					that.searchHistory=false;
					that.noResult=true;
					that.isAD=true;
					that.isActiveAD=false;  
					//数据加载提示框
					// uni.showLoading({
					// 	title: '拼命加载中',
					// 	mask: true
					// });
					// start 获取查询商品数据
					// uni.request({
					// 	url:this.$store.state.URL+"goods/good/search_goods",
					// 	data:{
					// 		goodName:"",
					// 		pagesize:8
					// 	},
					// 	method:"POST",
					// 	success(res){							   
					// 		that.searchDate=res.data.list.data
					// 		uni.hideLoading()
					// 		that.isAD=false;
					// 		that.isActiveAD=true;
					// 		that.searchResult=true;
					// 		that.searchHistory=false;
					// 		if(that.searchDate.length!=0){
					// 			that.searchResult=true;
					// 			that.searchHistory=false;
					// 			that.noResult=false;
					// 		}else{
					// 			that.searchResult=false;
					// 			that.searchHistory=false;
					// 			that.noResult=false;
					// 		}
					// 	},
					// })
					// end
					
				}
			},
			//获取存储的搜索值
			getSearchValList(){
				let that=this;
				if(this.$store.state.token==""){  //未登录
				    console.log("未登录");
				    that.loginSearch=false,
				    that.noLoginSearch=true
					const newSearchValList = uni.getStorageSync('searchValList');
					if(newSearchValList==""){
						//存储搜索值
						uni.setStorageSync('searchValList', that.searchGoodsData);
					}
					if (newSearchValList.length<=8) {
					   that.searchValList=newSearchValList;
					}
				}else{
					//数据加载提示框
					uni.showLoading({
						title: '拼命加载中',
						mask: true
					});
					console.log("登录");
					that.loginSearch=true,
					that.noLoginSearch=false
					uni.request({
						url: this.$store.state.URL + '/search/search_history/get_search',
						data: {
							token: this.$store.state.token,
							num:6
						},
						method:"GET",
						success(res) {
						  that.searchValList=res.data.msg;
						  uni.hideLoading();
						},
					})
				}
				
			},
		},
		components: {
			searchProductList,
		},
		onLoad() {
			this.getSearchValList();
			console.log(this.$store.state.token);
		}
	}
</script>

<style>
  page{
	  background:#f5f5f5;
  }
  #search{
    width:665upx;
  	height:60upx;
    border-radius: 30upx;
	background:#fff;
	margin:30upx 40upx;
	position:relative;
  }
   #search button{
  	  width:auto;
  	  height:60upx;
  	  font-size:30upx;
  	  color:#333;
  	  background:#fcdce2;
  	  border-radius: 30upx;
  	  line-height: 60upx;
	  position:absolute;
	  top:0upx;
	  right:0upx;
	  z-index: 9999999;
  }
  .search_placeholder{
  	font-size:24upx;
  	color:#333;
  	opacity: 0.7;
  }
  .search_icon{
  	position:absolute;
  	margin:15upx 25upx;
  }
  .search_input{
  	background:#fff;
  	opacity: 0.5;
  	width:72%;
  	height:60upx;
  	padding-left:35px;
  	border-radius: 30upx;
	font-size:24upx;
	color:#333;
  }
  .search_history text{
	margin-left:40upx;
  }
  .search_history image{
	float: right;
	margin-right:40upx;
	margin-top:10upx;
  }
  .search_content{
	display: flex;
	justify-content: flex-start;
	margin-top:30upx;
	flex-wrap: wrap;
  }
  .search_content view{
	  color:#999;
	  font-size:28upx;
	  width:auto;
	  height:64upx;
	  background:#fff;
	  border-radius: 30upx;
	  line-height: 64upx;
	  text-align: center;
	  margin:20upx 30upx;
	  padding:0 20upx;
  }
  .AD{
	  position: absolute;
	  bottom: 0;
	  left:50%;
	  margin-left: -18%;
	  margin-bottom:15upx ;
  }
  .activeAD{
	  position: relative;
	  bottom: 0;
	  left:50%;
	  margin-left: -18%;
	  margin-bottom:15upx ;
  }
  .AD text{
	  font-size:20upx;
	  color:#999;
	  margin:0 10upx;
  }
  .activeAD text{
  	  font-size:20upx;
  	  color:#999;
  	  margin:0 10upx;
  }
  .noResult{
	  margin-top:50%;
	  text-align: center;
  }
  .noResultText{
	  font-size:28upx;
	  color:#999;
  }
</style>
